<template>
	<view class="commodity" :style="'flex-wrap:'+wrap+';'">
		<!-- 单个商品组件 -->
		<view class="commodity_item" v-for="(item,index) in dataList" :key="index" :style="'width:'+itemW+';'" @click="toitem(item)">
			<image class="commodity_img" :src="`http://${item.image_url}`" mode="" :style="'height:'+bigH+';'"></image>
			<view class="commodity_content">
				<text class="commodity_msg">{{item.name}}
				</text>
				<view class="Commodity_prices">
					<text class="p_price">{{item.market_price}}</text>
					<text class="o_prict">{{item.product_desc}}</text>
					<text class="discount">{{item.market_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: Array,
			itemW: {
				typeof: String,
				default: "355rpx"
			},
			bigH: {
				typeof: String,
				default: "375rpx"
			},
			wrap: {
				typeof: String,
				default: "wrap"
			}
		},
		methods:{
			toitem(item){
				uni.navigateTo({
					url:`/pages/items/items?itemId=${encodeURIComponent(item.action.path)}&Itemprice=${encodeURIComponent(item.market_price)}`
				});
				// uni.navigateTo({
				// 	url: `/pages/toSearch/toSearch?item_name=${encodeURIComponent(this.item_name)}`,
				// });
			}
		}
	}
</script>

<style scoped>
	.commodity {
		display: inline-flex;
	}

	.commodity_item {
		width: 355rpx;
		padding-bottom: 10rpx;
		margin: 0 4rpx;
	}

	.commodity_img {
		width: 100%;
		margin: 20rpx;
		object-fit: cover;
	}

	.commodity_content {
		text-align: center;
	}

	.Commodity_prices {
		overflow: hidden;
		clear: both;
	}

	.commodity_msg {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #f19b5c;
		font-weight: bold;
		padding: 6rpx 10rpx;
	}

	.p_price {
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		display: inline;
		left: 0px;
		float: left;
		margin-left: 30rpx;
	}

	.o_prict {
		/* text-decoration: line-through; */
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 最多显示两行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* 可选：允许单词内断行 */
	}

	.discount {
		float: right;
		display: inline-block;
		border-radius: 4rpx;
		border: 1px solid red;
		padding: 2rpx 18rpx;
		color: red;
		font-size: 32rpx;
		margin-right: 20rpx;
	}
</style>